{{layout/logo-heading
	title="PlantUML"
	desc="Create UML diagrams from a plain text language (http://plantuml.com)"
	icon=constants.Icon.Integrations}}

{{#section/base-editor document=document folder=folder page=page busy=waiting
	isDirty=(action "isDirty") onCancel=(action "onCancel") onAction=(action "onAction")}}

	<div class="section-plantuml-diagram">
		<div class="form-group">
			<label><a href="http://plantuml.com/" target="_blank">PlantUML Diagram</a></label>
			<Ui::UiSpacer @size="200" />
			<div>
				<p>Insert sample diagrams:</p>
				<p>
					{{ui/ui-button color=constants.Color.Gray light=true label="Sequence" onClick=(action "onInsertSequence")}}
					{{ui/ui-button color=constants.Color.Gray light=true label="Use Case" onClick=(action "onInsertUseCase")}}
					{{ui/ui-button color=constants.Color.Gray light=true label="Class" onClick=(action "onInsertClass")}}
					{{ui/ui-button color=constants.Color.Gray light=true label="Activity" onClick=(action "onInsertActivity")}}
					{{ui/ui-button color=constants.Color.Gray light=true label="Activity (new syntax)" onClick=(action "onInsertActivityNew")}}
					{{ui/ui-button color=constants.Color.Gray light=true label="Component" onClick=(action "onInsertComponent")}}
					{{ui/ui-button color=constants.Color.Gray light=true label="State" onClick=(action "onInsertState")}}
				</p>
			</div>
			{{focus-textarea value=diagramText rows=30 id=editorId class="diagram-editor form-control mousetrap"}}
		</div>
	</div>

	<Ui::UiSpacer @size="200" />

	{{ui/ui-button color=constants.Color.Yellow light=true label=previewButtonCaption onClick=(action "onPreview")}}

	<Ui::UiSpacer @size="200" />

	<div id={{previewId}} class="text-center">
		<img src={{diagramPreview}}>
	</div>

	<Ui::UiSpacer @size="200" />

{{/section/base-editor}}
